<template>
    <!-- 可编辑表格V2 -->
    <div id="hello">
        <h2 style="margin:0;text-align:center;">物品属性表</h2>

        <!-- 表格 -->
        <el-table :data="testDatas" border style="width: 100%;margin-top:10px" @cell-dblclick="cellDblclick"
            @header-contextmenu="(column, event) => rightClick(null, column, event)" @row-contextmenu="rightClick"
            :row-class-name="tableRowClassName">
            <el-table-column v-if="columnList.length > 0" type="index" :label="'编号'" :width="50" />
            <el-table-column v-for="(col, idx) in columnList" :key="col.prop" :prop="col.prop" :label="col.label"
                :index="idx" />
        </el-table>
        <p style="text-align:left;color:#ccc;">右键菜单，双击编辑</p>

        <div>
            <h3 style="text-align:center;">实时数据展示</h3>
            <label>当前目标：</label>
            <p>{{ JSON.stringify(curTarget) }}</p>
            <label>表头：</label>
            <p v-for="col in columnList" :key="col.prop">{{ JSON.stringify(col) }}</p>
            <label>数据：</label>
            <p v-for="(data, idx) in testDatas" :key="idx">{{ JSON.stringify(data) }}</p>
            <label>当前编辑：</label>
            <p>{{ showEditInput }}</p>
        </div>

        <!-- 单元格/表头内容编辑框 -->
        <div v-show="showEditInput" id="editInput" @mouseleave="showEditInput = false">
            <el-input placeholder="请输入内容" v-model="curTarget.val" clearable @change="updTbCellOrHeader">
                <template #prepend>{{ curColumn.label || curColumn.prop }}</template>
            </el-input>
        </div>

    </div>
</template>

<script>
import { defineComponent, ref, reactive, computed, defineEmits } from 'vue';
export default defineComponent({
    name: 'DictControl',
    props: ['dict'],
    emits: ['updateDict'],
    setup(props, { emit }) {
        let columnList = ref([
            { prop: "name", label: '字段说明' },
            { prop: "key", label: '字段名' },
            { prop: "value", label: '字段值' },
        ]);
        let testDatas = reactive(props.dict)
        let showMenu = ref(false)
        var showEditInput = ref(false)
        let curTarget = reactive({                 // 当前目标信息
            rowIdx: null,              // 行下标
            colIdx: null,              // 列下标
            val: null,                 // 单元格内容/列名
            isHead: undefined          // 当前目标是表头？
        })
        let countCol = ref(0)

        let curColumn = computed(() => {
            return columnList.value[curTarget.colIdx] ?? {}
        })

         // 单元格双击事件 - 更改单元格数值
        const cellDblclick = (row, column, cell, event) => {
            console.log(row, column, cell, event)
            showEditInput.value = false
            // if (column.index == null) return
            locateMenuOrEditInput('editInput', 200, event) // 编辑框定位
            showEditInput.value = true
            // 当前目标
            curTarget.value = {
                rowIdx: row.row_index,
                colIdx: column.index,
                val: row[column.property],
                isHead: false
            }
        };

        // 更改单元格内容/列名
        const updTbCellOrHeader = (val) => {
            if (!curTarget.isHead) // 更改单元格内容
                testDatas.value[curTarget.rowIdx][curColumn.value.prop] = val
            else { // 更改列名
                if (!val) return
                columnList.value[curTarget.colIdx].label = val
            }

            updateDictData()
        };

        // 定位菜单/编辑框
        const locateMenuOrEditInput = (eleId, eleWidth, event) => {
            let ele = document.getElementById(eleId)
            // ele.style.top = event.clientY - 25 + 'px'
            // ele.style.left = event.clientX - 25 + 'px'
            ele.style.top = event.clientY - 533 + 'px'
            ele.style.left = 650 + 'px'
            if (window.innerWidth - eleWidth < event.clientX) {
                ele.style.left = 'unset'
                ele.style.right = 0
            }
            console.log(event.clientX, event.clientY)
            console.log(ele.style.top, ele.style.left, ele.style.right)
        };

        const updateDictData = () => {
            emit('updateDict', testDatas.value);
        };

        return {
            columnList,
            testDatas,
            updTbCellOrHeader,
            locateMenuOrEditInput,
            updateDictData,
            showEditInput,
            curTarget,
            curColumn,
            cellDblclick,
        };

    },
});
</script>

<style lang="scss" scoped>
#hello {
    position: relative;
}

#contextmenu {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: 120px;
    border-radius: 3px;
    border: 1px solid #999999;
    background-color: #f4f4f4;
    padding: 10px;
    z-index: 12;

    button {
        display: block;
        margin: 0 0 5px;
    }
}

.hideContextMenu {
    position: absolute;
    top: 5px;
    right: 5px;
}

#editInput,
#headereditInput {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    min-width: 200px;
    max-width: 400px;
    padding: 0;
    z-index: 12;
}

#editInput .el-input,
#headereditInput .el-input {
    outline: 0;
    border: 1px solid #c0f2f9;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #c0f2f9;
}
</style>